<template>
    <view style="padding-bottom: 100rpx">
        <wxTopStatus :coustom="true" :isBack="false" backgroundColor="#fff">
            <view class="nav-title"> 欢迎！ </view>
        </wxTopStatus>

        <view class="page-index">
            <!-- <fui-status-bar
      background="#fff"
      :isOccupy="true"
      :isFixed="true"
    ></fui-status-bar> -->
            <!-- <view :style="{ height: top + 'px' }"></view> -->
            <!-- banner轮播图 -->

            <swiper autoplay circular>
                <swiper-item
                    v-for="item in bannerList"
                    :key="item.id"
                    class="banner-item"
                    @click="toTypeJump(item)"
                >
                    <image :src="item.pic" class="banner-img"></image>
                </swiper-item>
            </swiper>

            <!-- 功能区 -->
            <view class="func-box">
                <view
                    class="func-item flex-center-column gap-[20rpx]"
                    v-for="item in funcList"
                    :key="item.name"
                    @click="$jump(item.path as string)"
                >
                    <image :src="item.icon" mode="widthFix"></image>
                    {{ item.name }}
                </view>
            </view>

            <!--    论坛  -->

            <MeScrollPage
                :config="{
                    down: {
                        // use: false,
                    },
                    height: 100
                }"
                type="body"
                ref="MeScrollPageREF"
                :page="page"
            >
                <forumList @shareObj="clickShare" :data="page.data"></forumList>
            </MeScrollPage>
        </view>

        <tabbar></tabbar>

        <fui-safe-area></fui-safe-area>
    </view>
</template>
<script lang="ts" setup>
import { getImg, jump } from '@/utils/util'
import { getBannerAPI } from '@/api/banner'
import { getPostListAPI } from '@/api/posts'
import { PageProps } from '@/hooks/usePage'
import { videoDetailApi } from '@/api/video'

const page = reactive<PageProps>({
    params: {
        // 搜索参数
        search: '',
        // 业务target：1.关注 2.推荐
        bizTarget: '2',
        // 业务tab：1.热门 2.新发
        bizTab: '1',
        // 状态：0.待审核 1.已通过 2.未通过
        state: 1,
    },
    fetchData: getPostListAPI // 请求接口 带分页的
})

const bannerList = ref([])

const funcList = [
    {
        name: '论坛',
        icon: getImg('/img/icon/home/forum.png'),
        path: '/views/subViews/post/forumForTopic/index'
    },
    {
        name: '找客户',
        icon: getImg('/img/icon/home/client.png'),
        path: '/pages/cacUser/cacUser'
    },
    {
        name: '找产品',
        icon: getImg('/img/icon/home/product.png'),
        path: '/views/subViews/findProduct/index/index'
    },
    {
        name: '找工厂',
        icon: getImg('/img/icon/home/factory.png'),
        path: '/views/subViews/findFactory/index/index'
    },
    {
        name: '数据中心',
        icon: getImg('/img/icon/home/datacenter.png'),
        path: '/pages/statistics/statistics'
    }
]

// 轮播图跳转
const toTypeJump = async (item: any) => {
    // 	类型：1.产品 2.店铺 3.视频 4.帖子 5.外部链接

    switch (item.type) {
        case 1:
            // 跳转产品详情
            jump('/views/subViews/findProduct/productDetail/index', {
                id: item.bindId
            })
            break
        case 2:
            // 跳转店铺详情
            jump('/views/subViews/userHomePage/index/index', {
                factoryId: item.bindId
            })
            break
        case 3:
            // 跳转视频详情
            jump('/views/subViews/videoPage/videoDetail/index', {
                id: item.bindId
            })
            break
        case 4:
            // 跳转视频详情
            uni.showLoading()
            // 获取视频详情数据
            const r = await videoDetailApi(item.bindId)
            uni.setStorageSync('videoList', [r.data])
            uni.hideLoading()
            uni.navigateTo({
                url: `/views/subViews/videoPage/videoDetail/index?bindId=` + item.bindId
            })
            break
        default:
            jump(item.link)
            break
    }
}

const getBannerList = async () => {
    const res = await getBannerAPI({})
    if (res.code === 0) {
        bannerList.value = res.data
    }
}

// console.log(listRes)

onLoad(() => {
    getBannerList()
})
const shareObj = ref({})
const clickShare = (item) => {
    shareObj.value = item
    console.log('item=========================', item)
}

// uni.showShareMenu()
// 分享至朋友圈
// onShareTimeline(() => {
//     return {
//         title: shareObj.value.nickname + '发布了新帖子', //分享标题
//         query: 'id=' + shareObj.value.id, // 可不填 传递的参数，只能是这
//         imageUrl: shareObj.value.pics && shareObj.value.pics.length ? shareObj.value.pics[0] : ''
//     }
// })

onShareAppMessage((res) => {
    console.log(res, 12313)

    return {
        title: shareObj.value.nickname + '发布了新帖子', //分享标题
        path: '/views/subViews/post/postDetail/index?id=' + shareObj.value.id, // 可不填 传递的参数，只能是这', // 可不填 传递的参数，只能是这
        imageUrl: shareObj.value.pics && shareObj.value.pics.length ? shareObj.value.pics[0] : '' //封面图
    }
})
</script>
<style lang="scss" scoped>
.page-index {
    padding: 0 24rpx;

    .banner-img {
        width: 100%;
        height: 300rpx;
    }

    .func-box {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        justify-content: space-between;
        padding: 30rpx 0;

        .func-item {
            font-weight: 700;
            color: $theme-c;

            image {
                width: 90rpx;
            }
        }
    }
}

.banner-item {
    border-radius: 16rpx;
}
.nav-title {
    font-size: 22px;
    font-weight: 700;
    padding-left: 30rpx;
}
</style>
